<template>
  <div>
    <!-- 头部banner展示 -->
    <top-banner :bannerConfig="{ hei: '500px' }"></top-banner>
    <!-- 选择标签 -->
    <label-selector @clickLabel="getLabelData" :label="label"></label-selector>
    <!-- 默认展示的标签大小事宜图 -->
    <label-default
      v-if="!articleShow"
      :labelTow="label"
      @clickLabel="getLabelData"
    ></label-default>
    <!-- 点击之后展示标签文章数据 -->
    <label-data-show v-else :aData="labelData"></label-data-show>
    <!-- 页脚 -->
    <footr class="foot"></footr>
  </div>
</template>
<script>
import topBanner from "../../components/content/topBanner/TopBanner.vue";
import footr from "components/content/footr/Footr.vue";

import labelDefault from "./childComponents/labelDefault.vue";
import labelDataShow from "./childComponents/labelDataShow.vue";
import LabelSelector from "./childComponents/labelSelector.vue";

import getLabel from "netWork/getLabel";

export default {
  name: "Label",
  data() {
    return {
      articleShow: false,
      // 标签数据
      label: {},
      // 标签文章数据
      labelData: {},
    };
  },
  components: {
    LabelSelector,
    labelDataShow,
    labelDefault,
    footr,
    topBanner,
  },
  created() {
    // 获取标签
    getLabel().then((res) => {
      this.label = res.data;
    });
  },
  methods: {
    //根据传入的标签名字寻找数据
    getLabelData(k) {
      this.articleShow = true;
      getLabel(k).then((res) => {
        this.labelData = res.data;
      });
    },
  },
};
</script>
<style scoped>
</style>